<template>
	<view class="reset_form">

		<view class="tit">
			{{tit}}
		</view>
		<view class="login-form">
			<view class="input-item-box">
				<!-- 手机号 -->
				<view class="input-item" v-if="tit=='重置密码'">
					<input @input="inputChange" placeholder-class="myplaceholder" class="login-type-input" type="text"
						name="email" v-model.trim="formParams.account" placeholder="请输入手机号码" maxlength="30" />

					<image v-show="formParams.account" class="del_icon pass-icon" src="/static/img/login/clear.png"
						alt="" @tap="formParams.account = ''"></image>
				</view>

				<!-- 验证码 -->
				<view class="input-item input-item-sms-code" v-if="tit=='验证身份'">
					<view class="input-wrapper">
						<input type="number" v-model="formParams.account" placeholder="请输入验证码" maxlength="4"
							data-key="mobile" />

						<view class="sms-code-btn" :disabled="smsCodeBtnDisabled" @tap.stop="getSmsCode">
							<text v-if="!smsCodeBtnDisabled">重新获取</text>
							<text v-else class="sms-code-resend">{{
								`重新获取 (${codeSeconds})`
								}}</text>
						</view>
					</view>
				</view>


				<view class="input-item" v-if="tit=='设置密码'">
					<input @input="inputChange" placeholder-class="myplaceholder" class="login-type-input" type="text"
						name="email" v-model.trim="formParams.account" placeholder="请输入新密码" maxlength="30" />

					<image v-show="formParams.account" class="del_icon pass-icon" src="/static/img/login/clear.png"
						alt="" @tap="formParams.account = ''"></image>
				</view>

				<view class="input-item" v-if="tit=='设置密码'">
					<input @input="inputChange" placeholder-class="myplaceholder" class="login-type-input" type="text"
						name="email" v-model.trim="formParams.account" placeholder="请再次确认密码" maxlength="30" />

					<image v-show="formParams.account" class="del_icon pass-icon" src="/static/img/login/clear.png"
						alt="" @tap="formParams.account = ''"></image>
				</view>



			</view>

			<view class="msg" v-if="phone">
				我们已发送一条短信验证码至<text>{{phone}}</text>
			</view>
		</view>

		<view class="login-btn" :class="formParams.account?'blue':null" @tap="nextBtn()">
			下一步
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			tit: {
				type: String,
				default: ''
			},
			phone: {
				type: [Number, String],
				default: ''
			},
		},
		data() {
			return {
				codeSeconds: 60, // 验证码发送时间间隔
				// loginByPass: true,
				smsCodeBtnDisabled: false,

				formParams: {
					account: ''
				}
			}
		},
		methods: {
			inputChange() {

			},
			nextBtn() {
				this.$emit('nextStep', this.formParams.account)
			},
			// 发送验证码并进入倒计时
			async getSmsCode(usage = 'login') {
				// this.reqBody['mobile'] = this.tabCurrentIndex === 0 ? this.loginParams['mobile'] : this.registerParams[
				// 	'mobile'];
				// let checkSendCode = this.$mGraceChecker.check(
				// 	this.reqBody,
				// 	this.$mFormRule.sendCodeRule
				// );
				// if (!checkSendCode) {
				// 	this.$mHelper.toast(this.$mGraceChecker.error);
				// 	return;
				// }
				await this.$http
					.post(smsCode, {
						mobile: this.reqBody['mobile'],
						usage
					})
					.then(r => {
						if (r.data) {
							this.$mHelper.toast(`验证码发送成功, 验证码是${r.data}`);
						} else {
							this.$mHelper.toast('验证码已发送.');
						}
						this.smsCodeBtnDisabled = true;
						uni.setStorageSync('loginSmsCodeTime', moment().valueOf() / 1000);
						this.handleSmsCodeTime(59);
					});
			},
			handleSmsCodeTime(time) {
				let timer = setInterval(() => {
					if (time === 0) {
						clearInterval(timer);
						this.smsCodeBtnDisabled = false;
					} else {
						this.codeSeconds = time;
						this.smsCodeBtnDisabled = true;
						time--;
					}
				}, 1000);
			},

		}
	}
</script>

<style lang="scss">
	.reset_form {
		width: 100%;
		padding: 120px 64px 0;
		box-sizing: border-box;

		.tit {
			width: 100%;
			font-size: 48px;
			font-family: PingFang SC-常规体, PingFang SC;
			font-weight: normal;
			color: #000000;
		}

		.login-form {
			width: 100%;
			padding-top: 102px;
			box-sizing: border-box;


			.input-item-box {
				.hidden {
					opacity: 0;
				}
			}

			.input-item {
				margin-bottom: 8px;
				display: flex;
				align-items: center;
				height: 100upx;
				// margin-bottom: 20upx;
				border-bottom: 1upx solid rgba(0, 0, 0, .1);

				.left-icon {
					margin: 0 33upx;
					width: 36upx;
					height: 36upx;
				}

				.pass-icon {
					margin: 0 33px;
					width: 32px;
					height: 32px;
				}

				.myplaceholder {
					color: #AAB1C1;
				}

				.login-type-input {
					flex: 1;
					height: 80upx;
					color: #BFBFBF;
					font-size: 28upx;

					&.red {
						color: D64B43;
					}

				}

				.zhankai {
					margin-left: 10upx;
					color: #777D8B;
					font-size: 32upx;
				}

				.emmail-box {
					// padding-left: 20upx;
					// box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					// margin-right: 16upx;
					width: 208upx;
					height: 100%;

				}

				.sms-code-btn,
				.sms-code-resend {
					margin-right: 33upx;
					width: 208upx;
					text-align: center;
					// font-size: $font-base - 2upx;

					font-size: 28px;
				}

				.sms-code-btn.pricode-box {
					width: 240upx;
					height: 100%;
					// display: flex;
					align-items: center;

					.pricode-img {
						width: 100%;
					}

					.img-mask {
						position: absolute;
						top: 0;
						width: 100%;
						height: 100%;
						// z-index: 999;
					}
				}
			}

			.input-item-sms-code {
				position: relative;
				width: 100%;

				.sms-code-btn {
					position: absolute;
					height: 90upx;
					line-height: 90upx;
					right: 0;
					bottom: 0;
					font-size: 28px;
					font-family: MiSans-Regular, MiSans;
					font-weight: 400;
					color: #177FFF;
				}

				.sms-code-resend {
					color: #999;
				}

				.sms-code-btn:after {
					border: none;
					background-color: transparent;
				}
			}

			.msg {
				margin-top: 14px;
				font-size: 28px;
				font-family: MiSans-Regular, MiSans;
				font-weight: 400;
				color: #8C8C8C;
			}
		}

		.login-btn {
			margin: 234px auto 0px;

			width: 622px;
			height: 80px;
			background: #68ACFF;
			border-radius: 8px 8px 8px 8px;
			opacity: 1;
			font-size: 32px;
			font-family: MiSans-Regular, MiSans;
			font-weight: 400;
			text-align: center;
			color: #FFFFFF;
			line-height: 80px;

			&.blue {
				background-color: #177FFF;
			}


		}

	}
</style>
